{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>资讯详情</title>
<style type="text/css">
    .mui-content{background-color: #fff; padding: 12px 0;}
    .xw-border-top{ position: fixed;}
    .mb-cont img {width:100% !important;}
    body{overflow-x:hidden; margin-bottom: 10%;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content" id="main">
    <!--资讯标题-->
    <h4 class="mb-info-tit">{{data.title}}</h4>
    <!--浏览量、发布时间-->
    <div class="mb-label">
        <span><i class="iconfont icon-yanjing"></i>{{data.clickRate}}</span>
        <span><i class="iconfont icon-shijian"></i>{{data.createDate}}</span>
    </div>
    <!--资讯详情-->
    <div class="mb-cont" style="word-break:break-all;">
        {{data.content}}
    </div>

    <!--评论列表-->
    <div id="list_box" class="mb-comment nobd-comment">
        <!--&lt;!&ndash;评论循环主体开始&ndash;&gt;-->
        {% for item in comment.list %}
        <div class="mb-comment-list xw-border-bottom">
            <div class="mb-comment-nick mui-clearfix">
                <img class="mb-userphoto mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.headImgUrl}}"/>
                <div class="mb-nick-name mui-pull-left">
                    <b class="mb-nickname mui-ellipsis">{{item.commentPersonName}}</b>
                    <p class="mb-arr-time">{{item.createDate}}</p>
                </div>
            </div>
            <div class="mb-comment-cont">
                <a href="javascript:void(0);" onclick="js_button(this)" data-id="{{item.id}}" data-name="{{item.commentPersonName}}" data-cid="{{item.commentPersonId}}">
                    {{item.content}}
                </a>
                {% if item.reviewCount != 0 %}
                <a class="mb-replay-more" href="replaylist?id={{item.id}}" style="color:#bbb9b9;">查看{{item.reviewCount}}条回复</a>
                {% endif %}
            </div>
        </div>
        {% endfor %}
        <!--评论循环主体结束-->
    </div>
</div>

<!--回复、分享按钮-->
<form action="/information" method="post">
    <nav class="mui-bar mui-bar-tab mb-bar-tab xw-border-top">
        <input type="text" id="replay-input" class="mb-replay-btn" name="replayinput" placeholder="请输入回复内容" style="width:92%;"><i class="iconfont icon-sousuo"></i>
        <div class="mb-btn-submit">
            <input type="submit" name="submit" value="提交" />
        </div>
        <!--<a href="javascript:;" class="mb-share"><i class="iconfont icon-fenxiang"></i>分享</a>-->
    </nav>
</form>
{% endblock %}

{#js代码#}
{% block js %}
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("#replay-input").focus(function(){
            var parent = $(this).parent();
            parent.addClass("mui-active");
        });
        $("#replay-input").blur(function(){
            var parent = $(this).parent();
            parent.removeClass("mui-active");
        });
        var data = $(".mb-cont").html();
        var data1 = data.replace(/&lt;/g,'<');
        var data2 = data1.replace(/&gt;/g,'>');
        $(".mb-cont").html(data2);
    });
    var id = location.search.substr(4);
    mui(".mb-btn-submit").on('tap','input[type="submit"]',function(){
        var cont = $('#replay-input').val();
        if(cont == ''){
            return mui.toast('请填写回复内容');
        }
        mui.post('/information', {
            id: id,
            content: cont,
        },function(data){
            if(data.code!=200){
                mui.toast('评论失败');
            }else{
                mui.toast('评论成功');
                window.location.reload();
            }
        },'json'
        );
    });

    function js_button(e){
        var id = $(e).context['dataset']['id'];
        var cid = $(e).context['dataset']['cid'];
        var msg = '对'+$(e).context['dataset']['name']+'说...';
        mui.prompt('请填写回评',msg,'回评',['关闭','回评'],function(e){
            if(e.index==1){
                if(e.value == ''){
                    return mui.toast('请填写回复内容');
                }
                mui.post('/onereviewsend', {
                    commentId:id,
                    receivePersonId:cid,
                    receivePersonType:4,
                    content:e.value,
                    sign:1,
                    reviewId:'',
                    },function(data){
                        if(data.code!=200){
                            mui.toast('回评内容有敏感字符，重新输入');
                        }else{

                            mui.toast('回评成功');
                            window.location.reload();
                        }
                    },'json'
                );
            }else{
                console.log('回评结束');
            }
        })
    }

</script>


<script>
    var page = 2, //分页码
        comturl = location.search.substr(4);//获取当前文章ID
        timers = 1000;
        onoff = true;
    var imgUrl = 'http://img-test.zzyuu.com/';
    // 加载数据
    var LoadingData = function() {
            mui.ajax('/commentlist', {
                data: {
                    objectId: comturl,
                    objectType: 4,
                    pageNo: page
                },
                dataType: 'json',
                type: 'get',
                async: false,
                success: function (data) {
                    if (data.code != 200) {
                        console.log('获取评论失败');
                        mui.toast(data.message);
                    } else {
                        if (page > data.data['totalPage']) {
                            onoff = false;
                            return mui.toast('没有更多评论.....');
                        }
                        console.log(page);
                        console.log(data);
                        var commentdata = data.data['list'];
                        console.log(commentdata);
                        //评论盒子内容开始
                        var box = '';
                        var commentdiv1 = '<div class="mb-comment-list xw-border-bottom">';
                        var commentdiv2 = '<div class="mb-comment-nick mui-clearfix">';
                        var commentimg = '<img class="mb-userphoto mui-pull-left" src="';
                        var commentdiv3 = '<div class="mb-nick-name mui-pull-left">';
                        var commentb = '<b class="mb-nickname mui-ellipsis">';
                        var commentp = '<p class="mb-arr-time">';
                        var commentdiv4 = '<div class="mb-comment-cont">';
                        var commenta = '<a class="mb-replay-more" style="color:#bbb9b9;" ';
                        var commenta2 = '<a href="javascript:void(0);" onclick="js_button(this)" ';


                        for (var i = 0; i < commentdata.length; i++) {
                            if (commentdata[i]['reviewCount'] != 0) {
                                box += commentdiv1 + commentdiv2 + commentimg + imgUrl + commentdata[i]['headImgUrl']
                                    + '"/>' + commentdiv3 + commentb + commentdata[i]['commentPersonName'] + '</b>'
                                    + commentp + commentdata[i]['createDate'] + '</p></div></div>'
                                    + commentdiv4 + commenta2 + 'data-id=' + commentdata[i]['id'] + ' data-name=' + commentdata[i]['commentPersonName']
                                    + ' data-cid=' + commentdata[i]['commentPersonId'] + '>'
                                    + commentdata[i]['content'] + '</a>' + commenta + 'href="replaylist?id=' + commentdata[i]['id']
                                    + '"> 查看' + commentdata[i]['reviewCount'] + '条回复'
                                    + '</a></div></div>';
                            } else {
                                box += commentdiv1 + commentdiv2 + commentimg + imgUrl + commentdata[i]['headImgUrl']
                                    + '"/>' + commentdiv3 + commentb + commentdata[i]['commentPersonName'] + '</b>'
                                    + commentp + commentdata[i]['createDate'] + '</p></div></div>'
                                    + commentdiv4 + commenta2 + 'data-id=' + commentdata[i]['id'] + ' data-name=' + commentdata[i]['commentPersonName']
                                    + ' data-cid=' + commentdata[i]['commentPersonId'] + '>'
                                    + commentdata[i]['content'] + '</a></div></div>';
                            }
                            //创建盒子
                        }
                        var commentbox = $('#list_box');
                        commentbox.append(box);
                        if (page == data.data['totalPage']) {
                            onoff = false;
                            return mui.toast('没有更多评论.....');
                        }
                        page++;
                    }
                }
            }
        );
    };

    $(document).scroll(function() {
        //console.log($(document).scrollTop());

        if($(document).scrollTop()>=$(document).height()-$(window).height()-150){
            if(onoff) {
                clearTimeout(timers);
                timers = setTimeout(function () {
                    LoadingData();
                }, 300);
            }
        }
    });
</script>

<!--flotdemo-->
{% endblock %}
